<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="images/favicontop.png">
    <title>管理者信息</title>
    <!-- CDN引入start -->
    <!-- import Vue.js -->
    <script src="js/vue.js"></script>
    <!-- import stylesheet -->
    <link rel="stylesheet" href="//unpkg.com/view-design/dist/styles/iview.css">
    <!-- import iView -->
    <script src="//unpkg.com/view-design/dist/iview.min.js"></script>
    <!-- CDN引入end -->
    <!-- 引发顶行的css -->
    <link rel="stylesheet" href="css/home.css">
    <!-- 引入jQuery -->
    <script src="js/jquery.js"></script>

    <!--生成图片脚本引入开始 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
    <!-- 生成图片脚本引入结束 -->

    <!-- 微信小程序云环境包 -->
    <script src="js/cloud.js"></script>

    <!-- 加载动效css -->
    <link rel="stylesheet" href="css/loader.css">

    <link rel="stylesheet" href="css/home.css">

    <link rel="stylesheet" href="iconfont/iconfont.css">

    <script>
        if (sessionStorage.getItem("username") == null) {
            window.location.href = 'login.html'
        }
    </script>
    <style>
        /* 《账户管理》页面 */
        /* rgba(255, 233, 134, .3) */

        img {
            -webkit-user-drag: none;
        }

        #person {
            width: 100%;
        }

        body {
            background: #f4f4f6;
        }

        .contentBox {
            width: 100%;
        }

        span.ivu-divider-inner-text {
            font-size: 30px;
        }

        /* 修改布局style */

        .layout {
            border: 1px solid #d7dde4;
            background-color: #7d79f1 !important;
            position: relative;
            border-radius: 25px;
            overflow: hidden;
            margin: 25px 40px;
        }

        /* 让白框自动和文本一样高 */

        .clearfix::after {
            content: '';
            display: block;
            visibility: hidden;
            clear: both;
            height: 0;
        }

        /* 提高兼容性 */

        .clearfix {
            *zoom: 1;
        }

        /* 展示人员卡片style */
        /* .showPersonCard {
            border-radius: 25px;
        } */
        /* 展示框和卡片顶部的距离 */

        .ivu-card-body {
            margin-top: 20px;
            padding: 0;
        }

        /* 底框 */

        .ivu-card {
            background: #f4f4f6;
            border-radius: 25px;
        }

        .ivu-table-wrapper {
            /* padding: 0 20px 0 20px; */
            background-color: #fbfbfb;
            border-radius: 25px;
        }

        /* 背景*/

        .ivu-table {
            /* 测试 */
            /* background-color: #f8f8f9; */
            background-color: #fbfbfb;
            padding: 0 20px;
        }

        .ivu-table-header thead tr th {
            background-color: #fbfbfb;
            padding: 20px 0 15px 0;
            color: #bebebe;
            border-bottom: 2px solid #f1f0f2;
        }

        /* 隔一行 */
        /* 双数 */

        .ivu-table-stripe .ivu-table-body tr:nth-child(2n) td,
        .ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td {
            border-bottom: 1px solid #f1f0f2;
            border-top: 1px solid #f1f0f2;
            background-color: #ffffff;
        }

        .ivu-table-stripe .ivu-table-body tr:nth-child(2n) td:last-child,
        .ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td:last-child {
            border-radius: 0 12px 12px 0;
            border-right: 1px solid #f1f0f2;
        }

        .ivu-table-stripe .ivu-table-body tr:nth-child(2n) td:first-of-type,
        .ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td:first-of-type {
            border-radius: 12px 0 0 12px;
            border-left: 1px solid #f1f0f2;
        }

        /* 单数 */

        .ivu-table-stripe .ivu-table-body tr:nth-child(2n+1) td,
        .ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n+1) td {
            background-color: #fbfbfb;
        }

        .personBox {
            margin: 10px 10px;
            width: 45%;
        }

        /* 图标颜色 */
        /* .ivu-steps-icon {
            background-color: skyblue;
        } */

        .ivu-table td,
        .ivu-table th {
            border: 0;
        }

        /* 修改里面卡片的宽度 */

        table {
            width: 0px;
        }

        /* 添加管理人员的style */
        /* #addBox {
            margin: 30px 30px;
        } */

        .twoBox {
            width: 100%;
            display: flex;
            justify-content: space-around;
        }

        /* <!-- 验证最高权限 --> */
        /* 输入最高权限框 */

        .validationForm {
            width: 300px;
            margin: 0 auto;
            margin-top: 100px;
        }

        /* 新增账户 */

        .addForm {
            width: 300px;
            margin: 20px auto;
            /* background-color: pink; */
        }

        .successCard {
            width: 320px;
            margin: 20px auto;
        }

        .successCard .ivu-card {
            background-color: #ffffff;
        }

        .addMore {
            width: 88px;
            margin: 10px auto;
            background-color: #ffffff;
        }

        /* 内容 */
        /* 上面卡片调整 */

        span.ivu-divider-inner-text {
            font-size: 30px;
        }

        .addpersonCardBox {
            margin: 10px 0px;
            width: 45%;
            background-color: #ffffff;
        }

        .addpersonBox {
            margin: 10px 30px;
        }

        .ivu-input {
            border-color: #969aa2;
        }

        .ivu-input-group-append,
        .ivu-input-group-prepend {
            border-color: #969aa2;
        }

        /* .ivu-table-tbody {
            border-radius: 25px;
        } */
        /* tr.ivu-table-row {
            border-radius: 25px;
            overflow: hidden;
        } */
    </style>
</head>

<body>
    <div id="person">
        <!-- 上边栏 -->
        <Layout>
            <Header>
                <i-menu mode="horizontal" theme="light" active-name="showUsers.html" @on-select="navTo">
                    <div class="layout-logo">
                        <img style="height: 200%;width: 200%;margin: 0 auto 5px;" src="images/favicon.png">
                    </div>

                    <div class="layout-nav">
                        <menu-item name="index.html">
                            <i class="ivu-icon ivu-icon-md-list-box"></i>信息管理
                        </menu-item>
                        <menu-item name="showUsers.html" @click="getAuthority()">
                            <i class="ivu-icon iconfont icon-chengyuanweihu"></i> 账户管理
                        </menu-item>
                        <Dropdown @on-click="mine" style="margin-left: 20px">
                            <Avatar :style="{background: color[Math.floor(Math.random()*4)]}">{{username}}</Avatar>
                            <dropdown-menu slot="list">
                                <dropdown-item name="退出" style="text-align: center;">退出</dropdown-item>
                            </dropdown-menu>
                        </Dropdown>
                    </div>
                </i-menu>
            </Header>
        </Layout>
        <!-- 修改布局 -->
        <!-- 展示管理者 -->
        <div class="layout clearfix">
            <Content class="contentBox clearfix" :style="{padding: '0 50px'}">
                <div class="twoBox ">
                    <!-- 添加管理人员 -->
                    <!-- 标题分割线 -->
                    <!-- <div>
                            <Divider plain> 添加管理人员</Divider>
                        </div> -->
                    <Card class="addpersonCardBox">
                        <div class="addpersonBox">
                            <!-- 标题 -->
                            <h1 style="color: #05034e;padding-bottom: 20px;">新增管理人员</h1>
                            <!-- 步骤条 -->
                            <Steps :current=currentNum>
                                <Step title="验证最高权限" icon="ios-person"></Step>
                                <Step title="新增账户" icon="ios-add-circle"></Step>
                                <Step title="新增成功" icon="md-checkmark-circle"></Step>
                            </Steps>
                            <div class="backgroundBox">
                                <!-- 验证最高权限 -->
                                <div v-show="topadminCheckShow" class="validationForm">
                                    <!-- <Card style="width: 350px; display: flex; justify-content: center;"> -->
                                    <i-form :rules="ruleInline" @submit.native.prevent inline>
                                        <form-item>
                                            <!-- v-model 双向绑定 -->
                                            <i-input @on-enter="handleValidation" type="password" v-model="toppassword"
                                                placeholder="请输入最高权限密码" style="width: 200px; margin: auto;">
                                                <Icon type="ios-lock-outline" slot="prepend"></Icon>
                                            </i-input>
                                        </form-item>
                                        <form-item>
                                            <i-button type="primary" @click="handleValidation">验证</i-button>
                                        </form-item>
                                    </i-form>
                                    <!-- </Card> -->

                                </div>
                                <!-- 新增账户 -->
                                <div v-show="addUserShow" class="addForm">
                                    <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate"
                                        :label-width="80" label-position="left">
                                        <!-- 姓名 -->
                                        <form-item label="姓名" prop="username">
                                            <i-input v-model="formValidate.username" placeholder="请输入管理员人员姓名"
                                                @on-enter="handleSubmit">
                                                <i-input>
                                        </form-item>
                                        <!-- 手机号码 -->
                                        <form-item label="手机号码" prop="phone">
                                            <i-input type="tel" v-model="formValidate.phone" placeholder="请输入管理员人员手机号码"
                                                @on-enter="handleSubmit">
                                                <i-input>
                                        </form-item>
                                        <!-- 账号密码 -->
                                        <form-item label="账号密码" prop="password">
                                            <i-input v-model="formValidate.password" placeholder="请输入管理员人员账号密码"
                                                @on-enter="handleSubmit">
                                                <i-input>
                                        </form-item>
                                        <!-- 权限 -->
                                        <form-item label="权限" prop="authority">
                                            <radio-group v-model="formValidate.authority">
                                                <Radio label="admin">admin</Radio>
                                                <Radio label="worker">worker</Radio>
                                            </radio-group>
                                        </form-item>
                                        <form-item>
                                            <i-button type="primary" @click="handleSubmit">添加</i-button>
                                            <i-button @click="handleReset('formValidate')" style="margin-left: 8px">
                                                清空
                                            </i-button>
                                        </form-item>
                                    </i-form>
                                </div>
                                <!-- 添加成功 -->
                                <div v-show="successCardShow" class="successCard">
                                    <Card style="width:320px">
                                        <div style="text-align:center">
                                            <img src="images/success.png" width="50px" height="50px">
                                            <h3>成功添加管理人员</h3>
                                        </div>
                                    </Card>
                                </div>
                                <!-- 继续添加 -->
                                <div @click="addMoreUser" class="addMore" v-show="successCardShow">
                                    <i-button type="primary" shape="circle">继续添加</i-button>
                                </div>
                            </div>

                        </div>
                    </Card>
                    <!-- 展示管理人员信息 -->

                    <div class="personBox clearfix">
                        <!-- 对话框 -->
                        <Modal v-model="showModal" :title="showTitle" @on-ok="topadminCheck" @on-cancel="cancel">
                            <!-- 验证最高权限 -->
                            <div v-show="topadminCheckShow2">
                                <i-input @on-enter="topadminCheck" v-model="toppassword" placeholder="请输入最高权限密码"
                                    type="password">
                                </i-input>
                            </div>
                            <!-- 修改权限 -->
                            <div v-show="updateAuthorityShow">
                                <radio-group v-model="authoritySelect">
                                    <Radio label="admin" id="RG1" ref="RG1">admin</Radio>
                                    <Radio label="worker" id="RG2" ref="RG2">worker</Radio>
                                    <!-- <i-option value="admin">admin</i-option>
                                    <i-option value="worker">worker</i-option> -->
                                </radio-group>
                            </div>
                            <!-- 删除框 -->
                            <div v-show="deleteShow">
                                <p>是否确认删除</p>
                            </div>
                            <!-- 自定义取消和确定框 -->
                            <div slot="footer">
                                <i-button @click="cancelClick">取消</i-button>
                                <i-button @click="confirmClick">确定</i-button>
                            </div>

                        </Modal>
                        <!-- 内容 -->

                        <Card class=" showPersonCard clearfix">
                            <!-- 搜索框 -->
                            <h2 style="padding: 0 30px 20px; color: #05034e;">修改或注销管理人员权限</h2>
                            <!-- input加入头尾表 -->
                            <!-- <i-input search placeholder="Enter something..." ></i-input> -->
                            <!-- 加载动效 -->
                            <Spin fix v-if="spinShow">
                                <div style="height:110px"><img class="loadImg spin-icon-load" src="images/轮.png">
                                </div>
                                <p style="color: #999999;">请求数据中</p>
                            </Spin>
                            <!-- 表格 -->
                            <i-table :columns="userColumns" :data="userData" stripe height="300">
                                <template slot-scope="{ row }" slot="username">
                                    <strong>{{ row.username }}</strong>
                                </template>
                                <template slot-scope="{ row, index }" slot="action">
                                    <i-button type="primary" size="small" style="margin-right: 5px"
                                        @click="validation(index),selectUpdate()">修改权限
                                    </i-button>
                                    <i-button type="error" size="small" @click="myDelete(index),selectDelete() ">注销
                                    </i-button>
                                </template>
                            </i-table>
                        </Card>
                    </div>
                </div>
            </Content>
        </div>
    </div>

    <script>
        $(".ivu-table-row").addClass("borderRadius");
        new Vue({

            el: '#person',
            data: {
                // 判断 
                phone: sessionStorage.getItem("phone"),
                // 控制加载动效
                spinShow: true,
                username: sessionStorage.getItem('username'),
                color: ['#ffa3b2', '#ffcff9', '#52dbaf', '#fec262'],

                //控制，是否已经通过最高权限
                isCheck: false,
                //左右事务隔离
                topadminCheckShow: true,
                topadminCheckShow2: false,

                updateAuthorityShow: false,
                showModal: false,
                toppassword: '',


                authoritySelect: '',
                infoIndex: '',
                deleteShow: false,
                // 改

                showTitle: '请输入最高权限密码',
                userColumns: [{
                        title: '管理员姓名',
                        slot: 'username',
                        width: 150,
                        align: 'center',
                    }, {
                        title: '权限',
                        key: 'authority',
                        align: 'center',
                        width: 150
                    },

                    {
                        title: '修改',
                        slot: 'action',
                        align: 'center',
                        width: 290
                    }
                ],
                userData: [

                ],
                whichButton: '',


                // 添加管理人员的data
                username: sessionStorage.getItem('username'),
                color: ['#ffa3b2', '#ffcff9', '#52dbaf', '#fec262'],
                topadminCheckShow: true,
                addUserShow: false,
                successCardShow: false,
                currentNum: 0,
                // data不要写成函数
                // 验证最高权限
                toppassword: '',
                ruleInline: {
                    toppassword: [{
                        required: true,
                        message: '请输入最高权限密码',
                        trigger: 'blur'
                    }]
                },
                // 新增账户
                formValidate: {
                    username: '',
                    phone: '',
                    password: '',
                    authority: ''
                },
                ruleValidate: {
                    username: [{
                        required: true,
                        message: '姓名不能为空',
                        trigger: 'blur'
                    }],
                    phone: [{
                        required: true,
                        message: '手机号码不能为空',
                        trigger: 'blur'
                    }, {
                        pattern: /^1[3456789]\d{9}$/,
                        message: "手机号格式不正确",
                        trigger: "blur"
                        // 这个是真正检测手机号格式(如号码开头正不正确，位数正不正确，是不是包含了不该有的字符如字母等)的
                    }],

                    password: [{
                        required: true,
                        message: '账户密码不能为空',
                        trigger: 'blur'
                    }],
                    authority: [{
                        required: true,
                        message: '请选择授予的权限',
                        trigger: 'change'
                    }],

                }
            },
            methods: {
                // 展示管理人员的方法
                //上边
                navTo(name) {
                    window.location.href = name;

                },
                mine(name) {

                    if (name = '退出') {
                        sessionStorage.removeItem('username');
                        window.location = "login.html";
                    }
                },

                // 选择修改或者删除按钮
                selectUpdate() {
                    this.whichButton = "update"
                },
                selectDelete() {
                    this.whichButton = "delete"
                },

                // 左侧业务的最高权限验证事件
                topadminCheck() {
                    if (this.isCheck) {
                        return;
                    }
                    var that = this;
                    if (this.toppassword == '') {
                        this.$Notice.warning({
                            title: '最高权限密码不能为空'
                        });
                    } else {
                        $.ajax({
                            url: 'http://3v.gsdse.cn/UEBIMP/public/index.php/index/User/topadminCheck',
                            type: 'POST',
                            data: {
                                toppassword: that.toppassword
                            },
                            // 发送请求成功
                            success(res) {
                                if (res.error_code == 0) {
                                    that.topadminCheckShow2 = false;
                                    that.isCheck = true;

                                    that.$Notice.success({
                                        title: "验证成功"
                                    });
                                    if (that.whichButton == "update") {
                                        // 显示修改权限
                                        that.updateAuthorityShow = true;
                                        that.showTitle = "请选择修改后的权限";
                                    } else if (that.whichButton == "delete") {
                                        // 显示删除
                                        that.deleteShow = true;
                                        that.showTitle = "确认删除？";
                                    }
                                } else if (res.error_code == 1) {
                                    that.$Notice.error({
                                        title: res.msg
                                    });
                                } else if (res.error_code == 2) {
                                    that.$Notice.warning({
                                        title: res.msg
                                    });
                                }
                            },
                            error(res) {
                                console.log("请求发送失败");
                            }
                        })

                    }
                },

                // 右侧操作用户账号的最高权限验证事件
                handleValidation() {

                    var that = this;
                    if (this.toppassword == '') {
                        that.$Notice.warning({
                            title: '密码不能为空'
                        });
                    } else {
                        $.ajax({
                            // 请求连接
                            url: 'http://3v.gsdse.cn/UEBIMP/public/index.php/index/User/topadminCheck',
                            type: 'POST',

                            // 校验数据
                            // 当传的数据为单个值的时候,data要为一个对象形式
                            data: {
                                toppassword: that.toppassword
                            },

                            // 请求成功
                            success: function (res) {
                                if (res.error_code == 0) {
                                    that.$Notice.success({
                                        title: res.msg
                                    });
                                    // 使其下一步
                                    that.currentNum = 1;
                                    that.addUserShow = true;
                                    // 改了2
                                    that.topadminCheckShow = false;
                                    //设置最高权限已通过
                                    that.isCheck = true;
                                } else if (res.error_code == 1) {
                                    that.$Notice.error({
                                        title: res.msg
                                    });
                                } else if (res.error_code == 2) {
                                    that.$Notice.warning({
                                        title: res.msg
                                    });
                                }
                            },
                            // 请求发不出去 网络不好 服务器没开 网络不通
                            error() {
                                console.log("ajax请求发送失败");
                            }
                        })
                    }
                },

                // 修改蓝色框
                validation(index) {
                    this.showModal = true;
                    this.infoIndex = index;
                    if (this.userData[this.infoIndex].authority == 'admin') {
                        // ivu-radio-disabled
                        $("#RG1").addClass("ivu-radio-wrapper-disabled");
                        $("#RG1 span").addClass("ivu-radio-disabled");
                        $("#RG1 span input").attr("disabled", true);
                    } else if (this.userData[this.infoIndex].authority == 'worker') {
                        $("#RG2").addClass("ivu-radio-wrapper-disabled");
                        $("#RG2 span").addClass("ivu-radio-disabled");
                        $("#RG2 span input").attr("disabled", true);
                    }

                    //当没有验证过最高权限时
                    if (this.isCheck == false) {
                        this.topadminCheckShow2 = true;
                        this.showTitle = "请输入最高权限密码";
                        this.toppassword = '';
                        this.updateAuthorityShow = false;
                    } else if (this.isCheck == true) {
                        this.updateAuthorityShow = true;
                        this.deleteShow = false;
                        this.showTitle = "请选择修改后的权限";
                    }

                    // console.log(index);
                },
                // 删除红色框
                myDelete(index) {
                    this.showModal = true;
                    this.infoIndex = index;
                    //当没有验证过最高权限时
                    if (this.isCheck == false) {
                        // 改
                        this.topadminCheckShow2 = true;
                        this.showTitle = "请输入最高权限密码";
                        this.toppassword = '';
                        this.deleteShow = false;
                    } else if (this.isCheck == true) {
                        this.updateAuthorityShow = false;
                        this.deleteShow = true;
                        this.showTitle = "确认删除？";
                    }
                },

                // 修改对话确定框
                confirmClick() {
                    var that = this;
                    if (this.isCheck == false) {
                        this.topadminCheck();
                    } else if (that.whichButton == "update") {

                        $.ajax({
                            url: 'http://3v.gsdse.cn/UEBIMP/public/index.php/index/User/update_authority',
                            type: 'POST',
                            data: {
                                // 获取用户名
                                username: that.userData[that.infoIndex].username,
                                authority: that.authoritySelect
                            },
                            success(res) {
                                if (res.error_code == 0) {
                                    that.$Notice.success({
                                        title: res.msg
                                    });
                                    that.showModal = false;
                                    that.getUsers();

                                    //修改完后记得把标签中上一次的禁用属性变回初始状态
                                    $("#RG1").removeClass("ivu-radio-wrapper-disabled");
                                    $("#RG1 span").removeClass("ivu-radio-disabled");
                                    $("#RG1 span input").attr("disabled", false);
                                    $("#RG2").removeClass("ivu-radio-wrapper-disabled");
                                    $("#RG2 span").removeClass("ivu-radio-disabled");
                                    $("#RG2 span input").attr("disabled", false);
                                    that.$refs['RG1'].currentValue = false;
                                    that.$refs['RG2'].currentValue = false;

                                } else if (res.error_code == 1) {
                                    that.$Notice.error({
                                        title: res.msg
                                    });
                                } else if (res.error_code == 2) {
                                    that.$Notice.warning({
                                        title: res.msg
                                    });
                                }
                            },
                            error(res) {
                                console.log("请求发送失败");
                            }
                        })
                    } else if (that.whichButton == "delete") {
                        $.ajax({
                            url: 'http://3v.gsdse.cn/UEBIMP/public/index.php/index/User/delete_user',
                            type: "POST",
                            data: {
                                username: that.userData[that.infoIndex].username,
                            },
                            success(res) {
                                if (res.error_code == 0) {
                                    that.$Notice.success({
                                        title: res.msg
                                    });
                                    that.showModal = false;
                                    that.getUsers();
                                } else if (res.error_code == 1) {
                                    that.$Notice.error({
                                        title: res.msg
                                    });
                                } else if (res.error_code == 2) {
                                    that.$Notice.warning({
                                        title: res.msg
                                    });
                                }
                            },
                            error(res) {
                                console.log("请求发送失败");
                            }
                        })
                    }
                },
                // 自定义对话框取消按钮
                cancelClick() {
                    $("#RG1").removeClass("ivu-radio-wrapper-disabled");
                    $("#RG1 span").removeClass("ivu-radio-disabled");
                    $("#RG1 span input").attr("disabled", false);
                    $("#RG2").removeClass("ivu-radio-wrapper-disabled");
                    $("#RG2 span").removeClass("ivu-radio-disabled");
                    $("#RG2 span input").attr("disabled", false);
                    this.$refs['RG1'].currentValue = false;
                    this.$refs['RG2'].currentValue = false;
                    this.showModal = false;
                },
                // 对话框取消
                cancel() {
                    $("#RG1").removeClass("ivu-radio-wrapper-disabled");
                    $("#RG1 span").removeClass("ivu-radio-disabled");
                    $("#RG1 span input").attr("disabled", false);
                    $("#RG2").removeClass("ivu-radio-wrapper-disabled");
                    $("#RG2 span").removeClass("ivu-radio-disabled");
                    $("#RG2 span input").attr("disabled", false);
                    this.$refs['RG1'].currentValue = false;
                    this.$refs['RG2'].currentValue = false;
                    this.showModal = false;
                },
                // 获取数据
                getUsers() {
                    // 此时的this为Vue里的，这样才可以将Vue里面管理的method的userData进行赋值
                    var that = this;
                    that.$Loading.start();
                    that.spinShow = true;
                    $.ajax({
                        // 请求连接
                        url: 'http://3v.gsdse.cn/UEBIMP/public/index.php/index/User/select_user',
                        type: 'POST',

                        // 请求发送成功
                        success(res) {

                            //error_code为接口里的名字
                            if (res.error_code == 0) {

                                // 赋值数据
                                that.userData = res.users;
                                // console.log(that.userData);
                                // console.log(res.msg);
                            } else {
                                // 请求发出去 没查到数据
                                console.log(res.msg);
                            }
                        },
                        // 请求发不出去
                        error() {
                            console.log("ajax请求发送失败");
                        },
                        complete() {
                            that.$Loading.finish();
                            that.spinShow = false;
                        }
                    })
                },


                // 添加管理人员方法

                // 

                // 新增账户事件
                handleSubmit() {
                    var that = this;
                    if (this.formValidate.username == '' || this.formValidate.phone == '' || this.formValidate
                        .password == '' || this.formValidate.authority == '') {
                        that.$Notice.warning({
                            title: '请把信息填写完整'
                        });
                    } else {
                        $.ajax({
                            // 请求连接
                            url: 'http://3v.gsdse.cn/UEBIMP/public/index.php/index/User/insert_user',
                            type: 'POST',
                            // 给后端传送数据
                            data: that.formValidate,
                            // 发送请求
                            success: function (res) {
                                // 添加数据
                                // 插入成功
                                if (res.error_code == 0) {
                                    that.$Notice.success({
                                        title: '新增用户成功'
                                    });
                                    that.currentNum = 2;
                                    that.addUserShow = false;
                                    that.successCardShow = true;
                                    // 刷新事件 
                                    that.getUsers()
                                } else if (res.error_code == 1) {
                                    that.$Notice.error({
                                        title: res.msg
                                    });
                                    console.log(res.msg);
                                } else if (res.error_code == 2) {
                                    that.$Notice.warning({
                                        title: res.msg

                                    });
                                    console.log(res.msg);
                                }
                            },
                            // 请求发不出去 网络不好 服务器没开 网络不通
                            error() {
                                console.log("ajax请求发送失败");
                            }
                        })
                    }

                },
                // 回到添加
                addMoreUser() {
                    this.currentNum = 1;
                    this.addUserShow = true;
                    this.successCardShow = false;
                    this.handleReset('formValidate');
                },
                handleReset(formname) {
                    this.$refs[formname].resetFields();
                }

            },

            // 首次渲染时执行
            // 不能放在methods里
            mounted: function () {
                this.getUsers();
            }
        })
    </script>
</body>

</html>